 <!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->|
<!DOCTYPE html>
<html>
<head>
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
  <script type="module" src="../../polymer-legacy.js"></script>
</head>
<body>

<dom-module id="x-test">
  <template>
    <div>behavior says: {{behaviorProp}}</div>
    <div>element says: {{prop}}</div>
  </template>
</dom-module>
<script type="module">
import { Polymer } from '../../polymer-legacy.js';
import { DomModule } from '../../lib/elements/dom-module.js';
import { mixinBehaviors } from '../../lib/legacy/class.js';
/** @polymerBehavior */
var MyBehavior = {
  properties: {
    behaviorProp: {
      value: 'prop from behavior!',
      observer: '_propChanged'
    }
  },
  _propChanged: function(value) {
    console.log(this.localName, '_propChanged', value);
  },
  ready: function() {
    console.log(this.localName, 'MyBehavior.ready');
  }
}

/** @polymerBehavior */
var MyBehavior2 = {
  ready: function() {
    console.log(this.localName, 'MyBehavior2.ready');
  }
}

Polymer({
  is: 'x-test',
  behaviors: [MyBehavior],
  properties: {
    prop: {
      value: 'prop from x-test'
    }
  },
  ready: function() {
    console.log(this.localName, 'x-test.ready');
  }
});

// ***********

var XTest = customElements.get('x-test');

class XClass extends mixinBehaviors([MyBehavior, MyBehavior2], XTest) {
  static get is() { return 'x-class'}

  static get template() {
    return DomModule.import('x-test', 'template');
  }

  static get config() {
    return {
      properties: {
        prop: {
          value: 'prop from x-class'
        }
      }
    }
  }
  ready() {
    super.ready();
    console.log('x-class ready');
  }
}

customElements.define(XClass.is, XClass);
</script>

<x-class></x-class>

</body>
</html>
